import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Modal } from 'antd';
import { FormComponentProps } from "antd/lib/form/Form";

import { SearchCol, SearchRow, MyButton } from '@/styled/form';

import { inject_unount } from '@/utils/middleware';

import { DICT } from '../enum';
import Imgviewer from '@/components/ImgViewer';
import { DropDownSelect } from '@/components/DropDownSelect';


interface Props extends FormComponentProps {
  dispatch?: Function,
  history?: any,
  dict?: any,
  data?: {
    id?: string;
    buildId?: string;
    floorPlan?: string;
    floorType?: number | string;
    floorName?: string;
  },
  location?: any,
  img?: {
    url: string,
    message: string
  },
  buttons?: Array<any>;
  wrappedComponentRef?: any;
  visible?: boolean;
  onCancel?: Function;
  onCreate?: Function;
}

@connect(({ build_floor, upload, routing }) => ({
  dict: build_floor.dict || {},
  img: upload.imgValue,
  location: routing.location,
}))
@inject_unount
class FormItem extends Component<Props, any> {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
    isNew: true,
  };
  formRef: any;

  componentDidMount() {
    const { data, form, dispatch } = this.props;
    dispatch({
      type: 'build_floor/init',
      payload: {
        dict: { keyList: DICT },
        url: data ? data.floorPlan : null
      }
    })
    if (data) {
      const { id, buildId, ...items } = data;
      form.setFieldsValue(items)
    }
  }

  uploadImage(e) {
    e.persist();
    const { dispatch } = this.props;

    const file = e.target.files[0];
    dispatch({ type: 'upload/uploadImg', payload: file });
  }

  onCancel = () => {
    this.props.onCancel()
  };

  onCreate = () => {
    const { img } = this.props;
    this.props.onCreate(img.url)
  }

  render() {
    const { form, visible, img, dict } = this.props;

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 16 },
      },
    };

    return (
      <Modal
        visible={visible}
        title="新增夹层"
        okText="保存"
        cancelText="取消"
        onCancel={this.onCancel}
        onOk={this.onCreate}
        destroyOnClose
      >
        <Form>
          <SearchRow>
            <SearchCol span={24} key={1}>
              <Form.Item
                {...formItemLayout}
                label='楼层号'
              >
                {getFieldDecorator('floorName', {
                  rules: [{ required: true, message: '请输入楼层号' }],
                })(
                  <Input style={{ width: '100%' }} placeholder='请输入楼层号' />
                )}
              </Form.Item>
            </SearchCol>
            <SearchCol key={2} span={24}>
              <Form.Item
                label="楼层类型"
                {...formItemLayout}
              >
                {getFieldDecorator('floorType', {
                  rules: [{ required: true, message: '请选择楼层类型' }],
                })(
                  DropDownSelect(dict, 'floor.type')
                )}
              </Form.Item>
            </SearchCol>
            <SearchCol span={24} key={3}>
              <Form.Item
                {...formItemLayout}
                label='平面图'
              >
                <input type="file"
                  style={{ opacity: 0, width: 120, zIndex: 10, position: 'absolute', cursor: 'pointer' }}
                  onChange={(e) => { this.uploadImage(e) }}
                  accept="image/*"
                />
                <MyButton style={{ marginTop: -50 }} icon="upload">上传图片</MyButton>
                <span>
                  <Imgviewer hasText="查看图片" missText="暂无图片" url={img.url} />
                </span>
              </Form.Item>
            </SearchCol>
          </SearchRow>
        </Form>
      </Modal>
    );
  }
}

const FormList = Form.create<Props>({ name: 'form_in_modal' })(FormItem);
export default FormList;
